<template>
  <div>
    <!-- <el-container> -->
    <!-- <el-header style="border: 1px solid green">Header</el-header> -->
    <!-- <layout-header></layout-header>
    
    <el-container>
      <el-main style="border: 1px solid green; width: 180rem">Main</el-main>
      <el-aside style="border: 1px solid red; width: 40rem">Aside</el-aside>
    </el-container>
    <el-footer style="border: 1px solid green">Footer</el-footer>
    </el-container> -->
    <el-row class="container">
      <!--头部-->
      <!-- <el-col :span="24"><layout-header></layout-header></el-col> -->
      <el-col :span="24"><router-view name="top"></router-view></el-col>
      <!-- <el-col :span="24"><top-Nav></top-Nav></el-col> -->
      <el-col :span="24" class="main">
        <!--左侧内容区-->
        <section class="content-container">
          <div class="grid-content bg-purple-light">
            <transition name="fade" mode="out-in">
               <router-view></router-view>
            </transition>
          </div>
        </section>
        <!--右侧内容-->
        <router-view name="aside"></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import LayoutHeader from "@/views/Main/Header";
// import LayoutBody from "@/views/Main/Body";
// import topNav from '@/components/nav/topNav.vue';
export default {
  name: "app-main",
  components: {
   // LayoutHeader: LayoutHeader,
   //LayoutBody: LayoutBody,
    // topNav: topNav,
  },
};
</script>

<style scoped>
</style>